<template>
  <div>
    <el-row :gutter="10" class="mb8"> </el-row>
    <!-- 列表 -->
    <el-table
      v-loading="loading"
      :data="articlesList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="订单明细编号"
        align="center"
        prop="detailNumber"
      />
      <el-table-column label="商品名" align="center" prop="productName" />
      <el-table-column label="订单数量" align="center" prop="productQuantity" />
      <el-table-column label="商品图片" align="center" prop="productImage">
        <template slot-scope="scope">
          <img :src="scope.row.productImage" alt="" class="images" />
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="center" prop="orderAmount" />
      <el-table-column label="实付金额" align="center" prop="paidAmount" />
      <el-table-column label="实付积分" align="center" prop="paidPoints" />
      <el-table-column label="子订单状态" align="center" prop="suborderStatus">
        <template slot-scope="scope">
          <span v-if="scope.row.suborderStatus == 0">待付款</span>
          <span v-if="scope.row.suborderStatus == 1">已付款</span>
          <span v-if="scope.row.suborderStatus == 2">待发货</span>
          <span v-if="scope.row.suborderStatus == 3">已发货</span>
          <span v-if="scope.row.suborderStatus == 4">已收货</span>
          <span v-if="scope.row.suborderStatus == 5">待评价</span>
          <span v-if="scope.row.suborderStatus == 6">已评价</span>
          <span v-if="scope.row.suborderStatus == 7">仅退款</span>
          <span v-if="scope.row.suborderStatus == 8">退货退款</span>
          <span v-if="scope.row.suborderStatus == 9">换货</span>
          <span v-if="fscope.row.suborderStatus == 10">已取消</span>
        </template>
      </el-table-column>
      <el-table-column
        label="所在地区"
        align="center"
        prop="dbOrderEntity.region"
      />
      <el-table-column
        label="详细地址"
        align="center"
        prop="dbOrderEntity.address"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handldeise(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :showSearch.sync="showSearch"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getData"
    />

    <!-- 查看详情 -->
    <el-dialog
      title="实物售后订单列表"
      :visible.sync="openDelis"
      width="700px"
      append-to-body
    >
      <el-form ref="form" :model="formOne" label-width="120px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="订单明细编号:">{{
              formOne.detailNumber
            }}</el-form-item>
            <el-form-item label="商品编号："
              >{{ formOne.productCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品SKU：">{{
              formOne.productSku
            }}</el-form-item>
            <el-form-item label="商品名称："
              >{{ formOne.productName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品单价：">{{
              formOne.productPrice
            }}</el-form-item>
            <el-form-item label="订单金额：">
              {{ formOne.orderAmount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运费：">{{ formOne.freight }}</el-form-item>
            <el-form-item label="订单优惠金额：">
              {{ formOne.discountAmount }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实付金额：">{{
              formOne.paidAmount
            }}</el-form-item>
            <el-form-item label="订单积分：">
              {{ formOne.orderPoints }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="订单优惠积分：">{{
              formOne.discountPoints
            }}</el-form-item>
            <el-form-item label="实付积分：">
              {{ formOne.paidPoints }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物流单号：">{{
              formOne.logisticsNumber
            }}</el-form-item>
            <el-form-item label="子订单状态：">
              <span v-if="formOne.suborderStatus == 0">待付款</span>
              <span v-if="formOne.suborderStatus == 1">已付款</span>
              <span v-if="formOne.suborderStatus == 2">待发货</span>
              <span v-if="formOne.suborderStatus == 3">已发货</span>
              <span v-if="formOne.suborderStatus == 4">已收货</span>
              <span v-if="formOne.suborderStatus == 5">待评价</span>
              <span v-if="formOne.suborderStatus == 6">已评价</span>
              <span v-if="formOne.suborderStatus == 7">仅退款</span>
              <span v-if="formOne.suborderStatus == 8">退货退款</span>
              <span v-if="formOne.suborderStatus == 9">换货</span>
              <span v-if="formOne.suborderStatus == 10">已取消</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后状态：">
              <span v-if="afterOrderVo.returnStatus == 0">待处理</span>
              <span v-if="afterOrderVo.returnStatus == 1">已同意</span>
              <span v-if="afterOrderVo.returnStatus == 2">已拒绝</span>
              <span v-if="afterOrderVo.returnStatus == 3">已收货</span>
              <span v-if="afterOrderVo.returnStatus == 4">已退款</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主订单流水号：">
              {{ dbOrderEntity.orderNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收货人：">
              {{ dbOrderEntity.recipient }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码：">
              {{ dbOrderEntity.phoneNumber }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在地区：">
              {{ dbOrderEntity.region }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="详细地址：">
              {{ dbOrderEntity.address }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据来源：">
              {{ dbOrderEntity.dataSource }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后申请时间：">
              {{ parseTime(afterOrderVo.refundCreatTime) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后审核时间：">
              {{ parseTime(afterOrderVo.refundReviewTime) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="售后完成时间：">
              {{ parseTime(afterOrderVo.refundCompleteTime) }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qd">确 定</el-button>
        <el-button @click="qx">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { adminorderEntity } from "@/api/system/afterSales";

export default {
  data() {
    return {
      // 查询参数
      articlesList: [],
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },

      // 开关

      total: 0,
      ids: [],

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      formOne: {},
      openDelis: false,
      showSearch: true,
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    dbOrderEntity() {
      if (this.formOne.dbOrderEntity) {
        return this.formOne.dbOrderEntity;
      }
      return "";
    },
    afterOrderVo() {
      if (this.formOne.afterOrderVo) {
        return this.formOne.afterOrderVo;
      }
      return "";
    },
  },
  methods: {
    getData() {
      adminorderEntity(this.queryParams).then((res) => {
        this.total = res.total;
        this.loading = false;
        this.articlesList = res.rows;
      });
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 查看详情
    handldeise(row) {
      // console.log(row);
      this.openDelis = true;
      this.formOne = row;
    },
    //
    qd() {
      this.openDelis = false;
    },
    qx() {
      this.openDelis = false;
    },
  },
};
</script>

<style scoped>
.mb8 {
  margin-top: 10px;
  padding-left: 15px;
}
.bnt {
  margin-top: 5px;
}
.images {
  width: 70px;
  height: 70px;
}
</style>
